<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Header Example</title>
<script
      type="text/javascript"
      src="http://api.map.baidu.com/api?v=1.3"
    ></script>
<style>
  .header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; 
  background-color: black;
  color:white;
  background-image: url('./1.png');
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
  background-position-y:10px;
  }
  .header-left, .header-center, .header-right {
  display: flex;
  }
  .header-left {
  justify-content:left; 
  margin-top: 20px;
  margin-left: 20px;
  }
  .header-center {
  justify-content: center; 
  color:#3cccc9;
  }
  .header-right {
  justify-content:right; 
  margin-top: 20px;
  margin-right: 20px;
  }
  .body-container {
  display: flex; 
  justify-content: space-between; 
  width: 100%;
  margin: 0;
  background: black !important;
  color: white;
  }
  .left {
  width: 25%; 
  }
  .left p {
    margin-left:20px;
  }
  .center {
  width: 50%; 
  }

  .right {
  width: 25%; 
  }
  .left h1, .left h2, .center h1, .right h1, .right h2{
    text-align: center;
    font-size: 16px;
    color:white;
    background-image: url('./2.png');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
  }
  .circle1{
				width: 50px;
				height: 100px;
				border-radius: 50px 0 0 50px;
				line-height: 100px;
        margin-right: 5px;
        background: transparent;
        color:white;
        border:3px solid #3cccc9
	}
  .circle2{
				width: 50px;
				height: 100px;
				border-radius: 0 50px 50px 0;
				line-height: 100px;
        background: transparent;
        color:white;
        border:3px solid #3cccc9
			}
  .circle3{
				width: 50px;
				height: 50px;
        border-radius: 50px 0 0 0;
				line-height: 50px;
        margin-right: 5px;
        background: transparent;
        border:3px solid #3cccc9
	}
  .circle4{
				width: 50px;
				height: 50px;
        border-radius: 0 50px 0 0;
				line-height: 50px;
        margin-right: 5px;
        background: transparent;
        border:3px solid #3cccc9
	}
  .circle5{
				width: 50px;
				height: 50px;
        border-radius: 0 0 50px 0;
				line-height: 50px;
        margin-right: 5px;
        margin-top: 5px;
        background: transparent;
        border:3px solid #3cccc9
	}
  .circle6{
				width: 50px;
				height: 50px;
        border-radius: 0 0 0 50px;
				line-height: 50px;
        margin-right: 5px;
        margin-top: 5px;
        background: transparent;
        border:3px solid #3cccc9
	}
  .circle1:focus, .circle2:focus{
    color:#3cccc9;
  }
  .circle3.text:focus{
    color:#3cccc9
  }
  .circle3:focus .text,.circle4:focus .text,.circle5:focus .text,.circle6:focus .text {
  color:#3cccc9; 
  }
  .button-container {
  transform: rotate(45deg); 
  transform-origin: center; 
  margin:0;
  padding:0;
  margin-left: 50px;
  }
  .text{
    color:white;
    transform: rotate(-45deg); 
    transform-origin: center;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top:0;
    margin-left:0;
  }
  @keyframes progress-rotate {
  from {
    stroke-dashoffset: 283; 
  }
  to {
    stroke-dashoffset: 0;
  }
}

.progress-container {
  position: relative;
  width: 80px;
  height: 80px;
}

.progress-svg {
  width: 80%;
  height: 80%;
}

.progress-bg {
  fill: none;
  stroke: #ddd;
  stroke-width: 4;
}

.progress {
  fill: none;
  stroke: url(#gradient);
  stroke-width: 4;
  stroke-dasharray: 283; 
  stroke-dashoffset: 283; 
  animation: progress-rotate 2s ease-in-out forwards; 
}

.progress-text {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-25%, -25%);
  font-size: 14px;
  color: white;
  margin-left: -3px;
  margin-top: 5px;
}
.anniu{
  border-width: 0px;
  display: inline;
  background:transparent;
  color:white;
  margin-left: 20px;
  background-image: url('./3.png');
  background-size:contain;
  background-repeat: no-repeat; 
  background-position: center;
}
.anniu:focus{
  color:#3cccc9
}
.anniu2{
  border-width: 0px;
  background:transparent;
  color:white;
  margin-left: 20px;
  background-image: url('./3.png');
  background-size:contain;
  background-repeat: no-repeat; 
  background-position: center;
  margin-bottom: 10px;
}
.anniu2:focus{
  color:#3cccc9
}
.shijiao{
  display: block;
  border-width: 0px;
  background:transparent;
  color:black;
  width:12%;
  text-align:right;
  padding-bottom: 5px;
}
.shijiao:focus{
  color:#3cccc9;
}
</style>
</head>
<div class="header">
  <div class="header-left">
    <p style="padding-top: 10px;">机器人编号:[G25-RAE-23]</p>
  </div>
  <div class="header-center">
    <h1>高速公路智能巡检机器人平台</h1>
  </div>
  <div class="header-right">
    <div id="datetime" style="padding-right: 30px;padding-top: 20px;">
      <script>
          setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
      </script>
    </div>
    <div style="display: flex;">
      <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.hBt_Gll2I4heAy6DRr9oogAAAA?rs=1&pid=ImgDetMain" width="40px" height="40px"  style="padding-right: 10px;border-radius: 50%;margin-top: 10px;" alt="Robot Icon">
      <p style="margin-top: 20px;">狗头小帅</p>
    </div>
  </div>
</div>
<body>
  <div class="body-container">
    <div class="left">
      <h1>工作状态</h1>
      <p>巡检方式</p>
      <div style="width: 100%;font-size: small;">
        <button class="anniu">实时巡检</button>
        <button class="anniu">定时巡检</button>
      </div>
      <p>任务方式</p>
      <div style="width: 100%;font-size:small;">
        <button class="anniu" >违章抓拍</button>
        <button class="anniu" >事故勘察</button>
        <button class="anniu" >道路巡查</button>
      </div>
      <div style="display: flex;max-width: 90%;">
        <div style="width: 50%;">
          <p>电池检测</p>
          <div class="progress-container" style="margin-left: 20px;">
            <svg class="progress-svg" viewBox="0 0 100 100">
              <defs>
                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" style="stop-color:#007bff;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#ff7f00;stop-opacity:1" />
                </linearGradient>
              </defs>
              <circle class="progress-bg" cx="50" cy="50" r="45"></circle>
              <circle class="progress" cx="50" cy="50" r="45" transform="rotate(90 50 50)"></circle>
            </svg>
            <span class="progress-text">69%</span>
          </div>
        </div>
        <div style="width: 50%;">
          <p>连接状态</p>
          <img src="连接.svg" width="40%"  style="margin-left: 20px;margin-top: 10px;" alt="Robot Icon">
        </div>
      </div>
      <h2>预警文档</h2>
      <div style="width: 100%;margin: 0;padding: 0;">
        <div style="display: flex;justify-content: space-between;background-color: #3cccc9;">
          <h1 style="padding-left: 10px;padding-right: 10px;">序号</h1>
          <h1 style="padding-left: 10px;padding-right: 10px;">预警事项</h1>
          <h1 style="padding-left: 10px;padding-right: 10px;">预警代码</h1>
        </div>
        <div style="display: flex;justify-content: space-between;padding-top: 10px;padding-right: 10px;">
          <div>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
          </div>
          <div >
            <p>低电量</p>
            <p>超速行驶</p>
            <p>车流量大</p>
            <p>违规占道</p>
          </div>
          <div >
            <p>P011</p>
            <p>NO11</p>
            <p>M023</p>
            <p>NO12</p>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div style="position: relative; z-index: 0;">
        <video muted autoplay="autoplay" loop="loop" style="max-width: 100%; height:400px; display: block;object-fit: cover;">
          <source src="test.mp4" type="video/mp4"></source>
        </video>       
      </div>
      <div style="position: relative; z-index: 11; margin-top: -400px;">
        <div>
          <button class="shijiao" style="background-image: url('./4.png');background-size:20px;background-repeat: no-repeat;background-position:left;">左视角</button>
          <button class="shijiao" style="background-image: url('./5.png');background-size:20px;background-repeat: no-repeat;background-position:left;">右视角</button>
          <button class="shijiao" style="background-image: url('./6.png');background-size:20px;background-repeat: no-repeat;background-position:left;">旋转视角</button>
        </div>
      </div>
      <h1 style="margin-top: 370px;">实时监控画面</h1>
      <div style="display: flex;margin-top: 30px;">
        <div style="margin-left: 22%;">
          <div style="display: flex;">
            <button class="circle1">L</button>
            <button class="circle2">R</button>
          </div>
          <p style="margin-left: 10px;margin-top: 30px;">行走控制台</p>
        </div>
        <div style="align-items: center;justify-content: center;display: flex;flex-direction: column;height: 100%;margin-left: 50px;margin-top: 5%;">
          <button class="anniu2">双向广播</button>
          <button class="anniu2">应急广播</button>
        </div>
        <div>
          <div class="button-container" style="display: flex; flex-direction: column;">
            <div style="display: flex;">
              <button class="circle3"><p class="text">U</p></button>
              <button class="circle4"><p class="text">R</p></button>
            </div>
            <div style="display: flex;">
              <button class="circle6"><p class="text">L</p></button>
              <button class="circle5"><p class="text">D</p></button>
            </div>
          </div>
          <p style="text-align: center;margin-left: 50px;margin-top: 25px;">云台控制台</p>
        </div>
      </div>
    </div>
    <div class="right">
      <h1>实时位置</h1>
      <div
      style="max-width: 95%; height: 240px;margin-left: 5px; display: block;border:5px solid #3cccc9"
      id="container"
      ></div>
      <div style="display: flex;margin-left: 20px;">
        <div style="flex-grow: 1;">
          <p>坐标信息</p>
          <p>维度：41.481195</p>
          <p>经度：123.726633</p>
        </div>
        <div style="flex-grow: 1;">
          <p>实时位置</p>
          <p>沈本产业大道368km处</p>
        </div>
      </div>
      <h2>气象数据</h2>
      <div style="display: flex;justify-content: center;">
        <div class="progress-container">
          <svg class="progress-svg" viewBox="0 0 100 100">
            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#007bff;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ff7f00;stop-opacity:1" />
              </linearGradient>
            </defs>
            <circle class="progress-bg" cx="50" cy="50" r="45"></circle>
            <circle class="progress" cx="50" cy="50" r="45" transform="rotate(90 50 50)"></circle>
          </svg>
          <span class="progress-text">23.5°C</span>
          <p style="margin-top: -5px;margin-left: 10px;">温度</p>
        </div>
        <div class="progress-container">
          <svg class="progress-svg" viewBox="0 0 100 100">
            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#007bff;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ff7f00;stop-opacity:1" />
              </linearGradient>
            </defs>
            <circle class="progress-bg" cx="50" cy="50" r="45"></circle>
            <circle class="progress" cx="50" cy="50" r="45" transform="rotate(90 50 50)"></circle>
          </svg>
          <span class="progress-text">45.4%</span>
          <p style="margin-top: -5px;margin-left: 10px;">湿度</p>
        </div>
        <div class="progress-container">
          <svg class="progress-svg" viewBox="0 0 100 100">
            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#007bff;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ff7f00;stop-opacity:1" />
              </linearGradient>
            </defs>
            <circle class="progress-bg" cx="50" cy="50" r="45"></circle>
            <circle class="progress" cx="50" cy="50" r="45" transform="rotate(90 50 50)"></circle>
          </svg>
          <span class="progress-text">983kph</span>
          <p style="margin-top: -5px;margin-left: 10px;">气压</p>
        </div>
      </div>
      <div style="display: flex;justify-content: center;margin-top: 10px;">
        <div class="progress-container">
          <svg class="progress-svg" viewBox="0 0 100 100">
            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#007bff;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ff7f00;stop-opacity:1" />
              </linearGradient>
            </defs>
            <circle class="progress-bg" cx="50" cy="50" r="45"></circle>
            <circle class="progress" cx="50" cy="50" r="45" transform="rotate(90 50 50)"></circle>
          </svg>
          <span class="progress-text">634px</span>
          <p style="margin-top: -5px;margin-left: 10px;">光照</p>
        </div>
        <div class="progress-container">
          <svg class="progress-svg" viewBox="0 0 100 100">
            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#007bff;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ff7f00;stop-opacity:1" />
              </linearGradient>
            </defs>
            <circle class="progress-bg" cx="50" cy="50" r="45"></circle>
            <circle class="progress" cx="50" cy="50" r="45" transform="rotate(90 50 50)"></circle>
          </svg>
          <span class="progress-text">34ppm</span>
          <p style="margin-top: -5px;margin-left: 10px;">CO</p>
        </div>
        <div class="progress-container">
          <svg class="progress-svg" viewBox="0 0 100 100">
            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#007bff;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ff7f00;stop-opacity:1" />
              </linearGradient>
            </defs>
            <circle class="progress-bg" cx="50" cy="50" r="45"></circle>
            <circle class="progress" cx="50" cy="50" r="45" transform="rotate(90 50 50)"></circle>
          </svg>
          <span class="progress-text">0</span>
          <p style="margin-top: -5px;margin-left: 10px;">降雨</p>
        </div>
        <div class="progress-container">
          <svg class="progress-svg" viewBox="0 0 100 100">
            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#007bff;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ff7f00;stop-opacity:1" />
              </linearGradient>
            </defs>
            <circle class="progress-bg" cx="50" cy="50" r="45"></circle>
            <circle class="progress" cx="50" cy="50" r="45" transform="rotate(90 50 50)"></circle>
          </svg>
          <span class="progress-text">0</span>
          <p style="margin-top: -5px;margin-left: 10px;">火焰</p>
        </div>
      </div>
    </div>
  </div>
  <script>
    function setProgress(percent) {
      const circle = document.querySelector('.progress');
      const radius = circle.r.baseVal.value;
      const circumference = 2 * Math.PI * radius;

      const offset = circumference - percent / 100 * circumference;

      circle.style.strokeDasharray = `${circumference} ${circumference}`;
      circle.style.strokeDashoffset = offset;

      const text = document.querySelector('.progress-text');
      text.textContent = `${percent}%`;
    }
    setProgress(80);

    var map = new BMap.Map("container");
    var sContent =
      "<h4 style = 'margin:0;'>沈本产业大道</h4>";
    var point = new BMap.Point(123.726633,41.481195); 
    map.centerAndZoom(point, 16); 
    map.addControl(new BMap.NavigationControl());
    map.enableScrollWheelZoom(true); 
    var infoWindow = new BMap.InfoWindow(sContent);
    map.openInfoWindow(infoWindow, point); 
  </script>
</body>
</html>